<template>
    <div class='comment'>
        <div class="item">
            <p class="comment-title border-bottom border-top">用户评论</p>
            <div class="text-box">
                <div class="name">
                    <span>⭐⭐⭐⭐⭐</span> <span>m*0 2018-11-11</span>
                </div>
                <div  class="text" :class="[{'isshow':flag}]">物超所值，孩子一直喜欢恐龙，正好五一假期有时间来北京，带孩子看了表演，气势磅礴，很棒，孩子很喜欢，看完后还许久不愿意离开，告诉我明白了恐龙是怎么灭绝的，最后的一段演出很震撼，孩子看着都哭了，值得一看的演出，物超所值</div>
                <div v-if='showarrow' @click="showtext" class='arrow-up' :class="[{'move':flag}]">↑</div>
                <div class="imgbox">
                    <img src="https://imgs.qunarzz.com/p/tts4/1811/75/fe0179120cc8d502.jpg_228x168_8940a96f.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/p/tts3/1811/60/e946eba375593502.jpg_228x168_97297362.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/p/tts4/1811/75/fe0179120cc8d502.jpg_228x168_8940a96f.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/p/tts3/1811/60/e946eba375593502.jpg_228x168_97297362.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/p/tts4/1811/75/fe0179120cc8d502.jpg_228x168_8940a96f.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/p/tts4/1811/b4/5f6dbaf83ca26002.jpg_228x168_880d37a7.jpg" alt="">
                </div>
            </div>
        </div>
          <div class="item" v-for="item in list" :key="item.id">
            <p class="comment-title border-bottom border-top">用户评论</p>
            <div class="text-box">
                <div class="name">
                    <span>⭐⭐⭐⭐⭐</span> <span>m*0 2018-11-11</span>
                </div>
                <div ref="textNum" class="text" :class="[{'isshow':flag}]">{{ item.say }}</div>
                <div v-if='item.arrow' @click="showtext" class='arrow-up' :class="[{'move':flag}]">↑</div>
                <div class="imgbox">
                    <img src="https://imgs.qunarzz.com/piao/fusion/1806/79/1f1020a49cb67902.jpg_228x168_0df56cff.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/p/tts3/1811/60/e946eba375593502.jpg_228x168_97297362.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/piao/fusion/1806/b1/8cf3204705d0b002.jpg_228x168_cbba5531.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/p/tts3/1811/60/e946eba375593502.jpg_228x168_97297362.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/piao/fusion/1806/b1/8cf3204705d0b002.jpg_228x168_cbba5531.jpg" alt="">
                    <img src="https://imgs.qunarzz.com/p/tts4/1811/b4/5f6dbaf83ca26002.jpg_228x168_880d37a7.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    export default{
        data(){
            return{
                flag:false,
                move:false,
                showarrow:false,
                list:[
                    {id:2002,arrow:true,say:'北京的深秋着实是令人沉醉！想观赏红叶，实在不用挤着去香山，我就最爱北宫森林公园的秋。五彩斑斓，层林尽染，分分钟随手一拍就是美图。关键这里的山不是很高，有台阶路也有坡道，很适合全家同游，无论是老年人还是推着婴儿车，都可以共同行进，既可赏景，又可增进亲情。小江南景区景色秀美，揽翠亭可以登高望远，儿童区可以让孩子们笑逐颜开，其乐融融！公园周边有大型停车场，北门车场满了，停到南门附近的车场，条件差些，全是土路，且离公园门口稍远，十元一辆的车费在进园区前已统一收走。总之，这里还算是停车方便，景色怡人，适合赏秋之所！'},
                    {id:2003,arrow:false,say:'桂林山水甲天下，阳朔风光甲桂林。坐着竹筏沿漓江支流遇龙河顺水漂流，两岸平地而起的山峰倒影在水中，直如一幅幅水墨画，置身其中仿如在仙境，忘却一切尘世烦嚣，美！妙！'}
                ],         
            }
        },
        methods: {
            showtext(){
              this.flag=!this.flag
            }
        },
        mounted() {
           
        }
       
    }
</script>

<style lang="scss" scoped>
@import '../../css/sass/common.scss';
    .isshow{
        overflow: auto !important;
        max-height:none!important;
    }
    .comment{
        width: 100%;
        margin-top: 0.2rem;
        background-color: #fff;
    .item{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .comment-title{
            width: 100%;
             line-height: pt(44);
            height: pt(44);
            border-top: pt(1) solid #f1f1ff;
            border-bottom: pt(1) solid #f1f1ff;
        }
        .text-box{
            width: 100%;
            padding: 0.3rem 0.1rem;
            .name{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .text{
                font-size: 0.24rem;
                 max-height: pt(150);
                 overflow: hidden;
                padding: 0.2rem 0; 
                line-height: 0.4rem;
            }
            .arrow-up{
                padding: 0.068rem 0 ;
                font-size: 0.36rem;
                text-align: center;
                transform: rotateZ(180deg)
            }
            .arrow-up.move{
                animation: arrow 0.2s linear forwards
            }
            .imgbox{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                img{
                    width: 30%;
                    padding: 0.1rem 0.1rem;
                    height: 100%;
                }
            }
        }
    }
  }

  @keyframes arrow{
    to{
        transform: none
    }
  }
</style>

